<template>
    <div class="app-container">
      <div class="box">
        <div title="左" id="left">
          <iframe width="100%" height="1100" :src="`/web/viewer.html?file=${src}`" frameborder="0" id="myIframe3"></iframe>
        </div>
        <div title="右" id="right">
          <iframe width="100%" height="1100" :src="`/web/viewer.html?file=${src1}`" frameborder="0" id="myIframe4"></iframe>
        </div>
      </div>
    </div>
  </template>
    
  <script>
  import {previewForm, previewForm1} from "@/api/system/result";
  
  export default {
    data() {
      return {
        src: "",
        src1: "",
        id: "",
      };
    },
  
    created() {
      // 页面加载，拿到路由中的id复制给id
      this.id = this.$route.query.id;
    },
    mounted() {
      this.formView();
      this.clickView1();
      //这是滑选事件
      this.getSelectText();
      // 搜索时 接收数据
      this.getMessage();
    },
    methods: {
      //预览文件
      formView(){
        //接口函数传入id,返回的文件流
        previewForm(this.id).then(data => {
          var binaryData = [];
          binaryData.push(data);
          let url = window.URL.createObjectURL(
            new Blob(binaryData, {
            type: "application/pdf;charset=utf-8",
            })
          );
          if (url != null && url != undefined && url) {
            this.src = url;
          }
        })
      },
      //预览右文件
      clickView1(){
        //接口函数传入id,返回的文件流
        previewForm1(this.id).then(data => {
          var binaryData = [];
          binaryData.push(data);
          let url = window.URL.createObjectURL(
              new Blob(binaryData, {
              type: "application/pdf;charset=utf-8",
              })
          );
          if (url != null && url != undefined && url) {
              this.src1 = url;
          }
        })
      },
    // 滑选事件注册： 获取鼠标选中的文本
    getSelectText() {
      let _this = this;
      let iframe = document.getElementById('myIframe');
      let x = '';
      let y = '';
      let _x = '';
      let _y = '';
      // iframe 加载完成后执行并将双击事件过滤掉，因为双击事件可能也触发滑选，所以为了不误操作，将其剔除
      iframe.onload = function () {
        // 鼠标点击监听
        iframe.contentDocument.addEventListener('mousedown', function (e) {
          x = e.pageX;
          y = e.pageY;
        }, true);
        // 鼠标抬起监听
        iframe.contentDocument.addEventListener('mouseup', function (e) {
          _x = e.pageX;
          _y = e.pageY;
          if (x == _x && y == _y) return; //判断点击和抬起的位置，如果相同，则视为没有滑选，不支持双击选中
          var choose = iframe.contentWindow.getSelection().toString();
          _this.selectText = choose;
        }, true);       
      };
    },
    }
  };
</script>
<style scoped>
.box {
    width: 100%;
    height: 22px;
    display: flex;
    flex-direction: row;
}
.box > div {
    height: 22px;
    flex: 1;
}
</style>